<script setup>
	import VoucherTable from "./VoucherTable.vue"
</script>

<template>
	<div class="vc">
		<div class="vcBg"></div>
		<div class="vcMain">
			<div class="fourVersion">
				<div class="box box1">
					<div class="boxTop">
						<h1>个人免费版</h1>
						<h6>￥<label>0</label>/&nbsp;年</h6>
						<div>
							<label>*赠送20个标签</label>
							<div class="buy">免费体验</div>
						</div>
					</div>
					<div class="boxBottom">
						<div class="equity">包含权益：</div>
						<div class="equityContent">
							<label></label>
							<span>存储容量200M</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>功能1</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>功能2</span>
						</div>
					</div>
				</div>
				<div class="box box2">
					<div class="boxTop">
						<h1>个人专业版</h1>
						<h6>￥<label>144</label>/&nbsp;年</h6>
						<div>
							<label>*赠送20个标签</label>
							<div class="buy">立即购买</div>
						</div>
					</div>
					<div class="boxBottom">
						<div class="equity">包含权益：</div>
						<div class="equityContent">
							<label></label>
							<span>存储容量200M</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>免费版多有功能</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>功能2</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>功能3</span>
						</div>
					</div>
				</div>
				<div class="box box3">
					<div class="boxTop">
						<h1>团队标准版</h1>
						<h6>￥<label>288</label>/&nbsp;年</h6>
						<div>
							<label>*赠送100个标签 *团队管理员10人<br />*普通用户40人</label>
							<div class="buy">立即购买</div>
						</div>
					</div>
					<div class="boxBottom">
						<div class="equity">包含权益：</div>
						<div class="equityContent">
							<label></label>
							<span>个人专业版所有功能</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>存储容量300G*席位</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>协作访客25+25人*席位</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>功能1</span>
						</div>
					</div>
				</div>
				<div class="box box4">
					<div class="boxTop">
						<h1>团队旗舰版</h1>
						<h6>￥<label>432</label>/&nbsp;年</h6>
						<div>
							<label>*赠送500个标签 *团队管理员20人<br />*普通用户80人</label>
							<div class="buy">立即购买</div>
						</div>
					</div>
					<div class="boxBottom">
						<div class="equity">包含权益：</div>
						<div class="equityContent">
							<label></label>
							<span>团队标准版所有功能</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>存储容量500G*席位</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>协作访客50+50人席位</span>
						</div>
						<div class="equityContent">
							<label></label>
							<span>协作访客50</span>
						</div>
					</div>
				</div>
			</div>
			<div class="vcTable">
				<div class="vcTitle">功能权益对比</div>
				<div>
					<voucher-table></voucher-table>
				</div>
			</div>
		</div>
	</div>
</template>
<!-- 1 px = 0.75 pt ,现在都写px，后续单位改成pt -->
<style scoped>
	.vc {
		height: 100vh;
		width: 100%;
		position: relative;
		overflow-y: auto;
	}
	.vcBg {
		width: 100%;
		height: 434px;
		background: radial-gradient(#c8d9ff, rgba(225, 250, 255, 0));
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
	}
	.vcMain {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		padding-top: 54px;
		padding-left: 54px;
		padding-right: 54px;
		padding-bottom: 20px;
	}
	.fourVersion {
		margin: 0 auto;
		padding: 0;
		width: 100%;
		/* flex布局 */
		display: flex;
		/* 主轴上的对齐方式 */
		justify-content: space-between;
		/* 换行(类似浮动布局) */
		flex-wrap: wrap;
		/* 副轴上的对齐方式 */
		align-content: space-between;
	}
	.fourVersion .box {
		box-sizing: border-box;
		/* calc为CSS3内容 */
		width: calc(25% - 50px);
		height: 100%;
	}
	.fourVersion .box .boxTop {
		height: 175px;
		padding-left: 24px;
		border-radius: 10px;
	}
	.fourVersion .box .boxTop h1 {
		font-size: 38px;
		padding-top: 20px;
		font-family: YouSheBiaoTiHei;
		font-weight: normal;
		text-align: left;
		color: #3c2913;
		line-height: 63px;
	}

	.fourVersion .box .boxTop h6 {
		font-size: 16px;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: left;
		color: #000000;
		line-height: 23px;
	}
	.fourVersion .box .boxTop h6 label {
		font-size: 32px;
		margin: 0 2px;
	}
	.fourVersion .box .boxTop div {
		display: block;
		text-align: right;
		height: 41px;
	}
	.fourVersion .box .boxTop div label {
		font-size: 12px;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: left;
		color: #947641;
		line-height: 20px;
		float: left;
		width: 60%;
		height: 36px;
		margin-top: 4px;
	}
	.fourVersion .box .boxTop div .buy {
		width: 111px;
		height: 41px;
		display: inline-block;
		background: #3a3842;
		border-radius: 20px;
		font-size: 14px;
		font-family: SourceHanSansCN-Medium;
		font-weight: normal;
		text-align: center;
		color: #fcfae0;
		line-height: 41px;
		border: none;
		cursor: pointer;
		margin-right: 24px;
	}

	.fourVersion .box .boxBottom {
		min-height: 215px;
		background-color: #fff;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
		padding-top: 25px;
		padding-left: 34px;
	}
	.fourVersion .box1 .boxTop {
		background: linear-gradient(90deg, #f2edf5, #d9ced5);
	}
	.fourVersion .box2 .boxTop {
		background: linear-gradient(90deg, #fceeec, #f9e3e6);
	}
	.fourVersion .box3 .boxTop {
		background: linear-gradient(90deg, #eef5f6, #ced6d9);
	}
	.fourVersion .box4 .boxTop {
		background: linear-gradient(119deg, #fefbec 8%, #fffbe8 31%, #fcf2d0 92%);
	}
	.equity {
		height: 26px;
		font-size: 20px;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: left;
		color: #888888;
		line-height: 40px;
		margin-bottom: 16px;
	}
	.equityContent {
		font-size: 20px;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: left;
		color: #333752;
		line-height: 40px;
		position: relative;
	}
	.equityContent label {
		background: url("../../assets/img/check.png") no-repeat;
		position: absolute;
		top: 4px;
		left: 0;
		height: 30px;
		width: 30px;
	}
	.equityContent span {
		margin-left: 50px;
	}
	.vcTable {
		margin-top: 32px;
		width: 100%;
	}
	.vcTitle {
		height: 26px;
		font-size: 20px;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #333752;
		line-height: 26px;
		margin-bottom: 16px;
	}
</style>
